<%--
  Created by IntelliJ IDEA.
  User: 10379
  Date: 2020/9/23
  Time: 13:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/layui.all.js"></script>
<head>
    <title>用户信息管理</title>
</head>
<body>
<div>
    <button class="button" onclick="addUser()">新增用户</button>
    <input type="text" id="text" placeholder="请输入地址相关"/>
    <button  class="button" onclick="queryUserByAddress()">查询</button>
</div>
<div class="margin">
    <table class="table">
        <thead><tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>住址</td>
            <td>电话</td>
            <td>邮箱</td>
            <td>操作</td>
        </tr></thead>
        <tbody id="tb">

        </tbody>
    </table>
</div>
<%--分页区域--%>
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2">2</option>
    <option value="5">5</option>
    <option value="10">10</option>
    </select>条数据，当前是第<span id="currentPageSpan"></span>页，
    总共<span id="totalPageSpan"></span> 页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>
</div>
<%--这里做一个编辑用户信息的模态框--%>
<div class="modal" id="editModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>编辑用户信息<center><span id="ts" style="color: red"></span> </center></h4>
            </div>
            <div class="modal-body">
                <label class="control-label">用户姓名</label>
                <input class="form-control" type="text" id="nameInput" placeholder="请输入用户姓名"/>
                <label class="control-label">性别</label>
                <select class="form-control" id="sexSelect"><option value="0">男</option><option value="1">女</option> </select>
                <label class="control-label">请输入住址</label>
                <input class="form-control" type="text" id="addressInput" placeholder="请输入住址"/>
                <label class="control-label">电话</label>
                <input class="form-control" type="text" id="phoneInput" placeholder="请输入用户电话"/>
                <label class="control-label">邮箱</label>
                <input class="form-control" type="text" id="emailInput" placeholder="请输入邮箱"/>
                <label class="control-label">用户账号</label>
                <input class="form-control" type="text" id="usernameInput" placeholder="请输入用户账号"/>
                <label class="control-label">用户密码</label>
                <input class="form-control" type="password" id="passwordInput" placeholder="请输入用户密码"/>
                <input type="hidden" id="userIdInput"/>
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal" onclick="quxiao()">取消</button>
                <button class="button" onclick="editConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 2;
    //总共有多少页
    var totalPage;
    $(function () {
        // loadList();
        loadListByPage();
    })

    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
         currentPage = 1;
        loadListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }
    //上一页的回调方法
    function prePage() {
        currentPage--;
        if(currentPage<1){
            currentPage = 1;
        }
        loadListByPage();
    }
    //下一页的回调方法
    function nextPage() {
        currentPage++;
        if(currentPage>totalPage){
            currentPage = totalPage;
        }
        loadListByPage();

    }
    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }

    function showList(userList) {
        // console.log(JSON.stringify(userList));
        var html = '';
        //遍历userList数组
        for(var i=0;i<userList.length;i++){
            //拿到一个用户信息
            var item = userList[i];
            // console.log(JSON.stringify(item));
          html+="<tr>";
          html+="<td>"+item.userId+"</td>";//显示用户的id
          html+="<td>"+item.name+"</td>";//显示用户的名字
          if(item.sex==1){
              html+="<td>女</td>";//显示用户的性别
          }else {
              html+="<td>男</td>";//显示用户的性别
          }
           html+="<td>"+item.address+"</td>";
           html+="<td>"+item.phone+"</td>";
           html+="<td>"+item.email+"</td>";
           html+="<td><button class='button' onclick='getUserDetail(\""+item.userId+"\")'>编辑</button>" +
               "<button class='button' onclick='deleteOneUser(\""+item.userId+"\")'>删除</button></td>";
          html+="</tr>";
        }
        $("#tb").html(html);
    }

    //加载用户列表
    function loadList() {
        $.ajax({
            url:"${pageContext.request.contextPath}/user/getlist",
            type:'get',
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    showList(result.userList);
                }
            },
            error:function (err) {
                alert(JSON.stringify(err));
            }

        })
    }
    //分页加载用户列表
    function loadListByPage() {
        //刷新页面后都是显示第一页
        $.ajax({
            url:"${pageContext.request.contextPath}/user/getListByPage",
            type:'get',
            data:{"currentPage":currentPage,"pageSize":pageSize},
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    showList(result.userList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    function addUser() {
        //显示用户编辑的模态框
        showEditModal();
    }
    //清空模态框里面的数据
    function clearModal() {
        $("#userIdInput").val(0);
        $("#nameInput").val("");
        $("#sexSelect").val(0);
        $("#addressInput").val("");
        $("#phoneInput").val("");
        $("#emailInput").val("");
        $("#usernameInput").val("");
        $("#passwordInput").val("");
        $("#usernameInput").removeAttr("disabled");//去掉disabled这个属性
    }

    //获取一个用户的详细信息
    function getUserDetail(userId) {
        $.ajax({
            url:"${pageContext.request.contextPath}/user/getOne",
            type:'get',
            data:{"userId":userId},//传递用户id
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    showEditModal(result.user);
                }
            },
            error:function (err) {
                alert(err.message);
            }

        })
    }

    //显示用户编辑界面的模态框
    function showEditModal(user) {
        if(user!=null) {
            $("#userIdInput").val(user.userId);//传递userId
            $("#nameInput").val(user.name);
            $("#sexSelect").val(user.sex);//根据sex的值来选中select中的option
            $("#addressInput").val(user.address);
            $("#phoneInput").val(user.phone);
            $("#emailInput").val(user.email);
            $("#usernameInput").val(user.username);
            $("#passwordInput").val(user.password);
            $("#usernameInput").attr("disabled", "disabled");
        }else {
            clearModal();
        }
        $("#editModal").modal("show");
    }

    //根据userId修改用户信息
    function editConfirm(){
        var userIdValue = $("#userIdInput").val();
       var nameValue = $("#nameInput").val();
       var sexValue = $("#sexSelect").val();
        var addressValue = $("#addressInput").val();
         var phoneValue = $("#phoneInput").val();
       var emailValue = $("#emailInput").val();
        var usernameValue = $("#usernameInput").val();
        var passwordValue = $("#passwordInput").val();
        var dataValue = {userId:userIdValue,name:nameValue,sex:sexValue,address:addressValue,phone:phoneValue,
        email:emailValue,username:usernameValue,password:passwordValue};
        if(nameValue.length==0){
            alert("姓名不能为空");
            // $("#ts").html("姓名不能为空");
            $("#nameInput").focus();
            return;
        }if(addressValue.length==0){
            // $("#ts").html("地址不能为空");
            alert("地址不能为空");
            $("#addressInput").focus();
            return;
        }if(phoneValue.length==0){
            // $("#ts").html("电话不能为空");
            alert("电话不能为空");
            $("#phoneInput").focus();
            return;
        }if(emailValue.length==0){
            // $("#ts").html("邮箱不能为空");
            alert("邮箱不能为空");
            $("#emailInput").focus();
            return;
        }if(usernameValue.length==0){
            // $("#ts").html("用户名不能为空");
            alert("用户名不能为空");
            $("#usernameInput").focus();
            return;
        }if(passwordValue.length==0){
            // $("#ts").html("密码不能为空");
            alert("密码不能为空");
            $("#passwordInput").focus();
            return;
        }
        $.ajax({
            url:"${pageContext.request.contextPath}/user/edit",
            type:'post',//提交大量数据
            contentType:'application/x-www-form-urlencoded',//指明是个普通的表单提交
            data:dataValue,//传递用户编辑后的信息
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态框
                    loadListByPage();
                }
            },
            error:function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    //根据userId删除用户
    function deleteOneUser(userId){
        $.ajax({
            url:"${pageContext.request.contextPath}/user/delete",
            type:'get',
            contentType:'application/x-www-form-urlencoded',//指明是个普通的表单提交
            data:{"userId":userId},//传递用户id
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    //再次分页加载数据并显示在页面上
                    loadListByPage();
                }
                alert(result.message);
            },
            error:function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    //根据地址进行模糊查询
    function queryUserByAddress() {
        var text = $("#text").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/user/queryUserByAddress",
            type:'get',
            contentType:'application/x-www-form-urlencoded',//指明是个普通的表单提交
            data:{"address":text},//传递用户的输入信息
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    //将查询出来的集合做分页处理
                    loadListByPageForQuery(result.address);
                }
                alert(result.message);
            },
            error:function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    //按地址模糊查询后的分页
    function loadListByPageForQuery(address) {
        //刷新页面后都是显示第一页
        $.ajax({
            url:"${pageContext.request.contextPath}/user/getListByPageForQuery",
            type:'get',
            data:{"currentPage":currentPage,"pageSize":pageSize,"address":address},
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    showList(result.userList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                alert(JSON.stringify(err));
            }
        })
    }
</script>
</body>
</html>
